<!DOCTYPE HTML>
<html lang="zh-cn"
      xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <META HTTP-EQUIV="Pragma" CONTENT="no-cache"/>
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache"/>
    <META HTTP-EQUIV="Expires" CONTENT="0"/>

    <title>目录页</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body onload="index_click()">

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!--Echarts图表-->
<script src="../static/js/echarts.min.js" th:src="'/js/echarts.min.js'"></script>
<!--单页应用要用的-->
<script src="../static/js/common.js" th:src="'/js/common.js'"></script>
<!--单页bbs要用的-->
<script src="../static/js/singlePage/bbs.js" th:src="'/js/singlePage/bbs.js'"></script>
<script src="/js/singlePage/bbsSubmit.js"></script>


<div class="container">
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header" style="height: 100px">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target="#example-navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" onclick="index_click()"><img src="../static/img/logo/kobako.png"
                                                                     th:src="'/img/logo/kobako.png'"
                                                                     style="height: 100px;width: 100px"/></a>
            </div>
            <h1>出来損ない幸福</h1>
        </div>
    </nav>
    <div class="col-sm-2 col-xs-12">
        <nav class="navbar navbar-default" role="navigation">
            <div class="collapse navbar-collapse my-left-block-div" id="example-navbar-collapse">
                <ul class="nav navbar-nav my-menu">
                    <li class="active"><a href="#" onclick="index_click()">主页</a></li>
                    <li><a href="#" onclick="bbs_click()">留言板</a></li>
                    <li><a  href="#" onclick="essayClick()">一些随笔</a></li>
                    <li><a href="#" onclick="blogClick()">一些博文</a></li>
                    <li><a href="#" onclick="on_ability_click()">能力图表</a></li>
                    <li><a href="/blogerlogin">博主登陆</a></li>
                </ul>
            </div>
        </nav>
    </div>
    <div class="col-sm-10 col-xs-12">
        <div class="my-content" id="my-content">
            Now Loading...
        </div>
    </div>
</div>

<!--Templates!-->
<!--essay list-->
<template id="essay-template">
    <div>
        <div class="list-group">
            <!--<a v-for="essay in essays" v-bind:href="'/essays?id='+essay.id" class="list-group-item">{{essay.title}}</a>-->
            <a v-for="essay in essays" v-on:click="fillEssay(essay.id)" class="list-group-item">{{essay.title}}</a>
        </div>
    </div>
</template>

<!--blog list-->
<template id="blog-list-template">
    <div>
        <div class="list-group">
            <!--<a v-for="essay in essays" v-bind:href="'/essays?id='+essay.id" class="list-group-item">{{essay.title}}</a>-->
            <a v-for="blog in blogs" v-on:click="fillBlog(blog.id)" class="list-group-item">{{blog.title}}</a>
        </div>
    </div>
</template>

<!--blog&essay show-->
<template id="blog-show-template">
    <div class="container-fluid">
        <h1 class="page-header" id="blog_title">{{blog.title}}</h1>
        <div id="blog_content" v-html="blog.content">{{blog.content}}</div>
    </div>
</template>

<template id="index-template">
    <div>
        <h1 id="-">欢迎</h1>
        <h2 id="-kobako-">这里是kobako的个人小站</h2>
        <p>感谢白宅做的logo，感谢狗哥做的主页demo
            网站在github上开源
            <a href="https://github.com/zhuobinggang/personalPage">源码点这里</a></p>
        <h4 id="-">主要用到的框架如下</h4>
        <ul>
            <li>spring boot</li>
            <li>mybatis</li>
            <li>thymeleaf</li>
            <li>vue + jquery + bootstrap</li>
            <li>maven
                </li>
        </ul>
        <p>还有一些js插件就不一一列举了(因为博主自己都记不清了)，感谢开源社区</p>
        <h4 id="-">自认为算是亮点的地方</h4>
        <ul>
            <li>可以用<strong>markdown</strong>写博文</li>
            <li>单页web应用</li>
        </ul>
        <p>最后，请留言证明你来过</p>
    </div>
</template>

</body>
<!--VUE-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!--随笔列表-->
<script src="../static/js/singlePage/essay.js" th:src="'/js/singlePage/essay.js'"></script>
</html>